<template>
  <div class="login">
    <div class="form">
     <h1 class="form-title">
        欢迎{{ !isRegister ? '登陆': '注册' }}
     </h1>
     <div class="form-tip">
      WELCOME!
     </div>
     <div class="box">
      <div class="input">
        <People class="icon" theme="multi-color" size="20" :fill="['#324EC7' ,'#324EC7' ,'#FFF' ,'#43CCF8']"/>
        <span class="line"></span>
        <el-input v-model="usename" placeholder="请输入账号"/>
      </div>
      <div class="input">
        <Lock class="icon" theme="multi-color" size="20" :fill="['#324EC7' ,'#324EC7' ,'#FFF' ,'#43CCF8']"/>
        <span class="line"></span>
        <el-input v-model="password" type="password" placeholder="请输入密码" @blur="inpublur('default')" />
      </div>
      <span class="input-err" v-if="passwordErr">
          {{
            !password? '请输入密码' : ''
          }}</span>
      <div class="input"  v-if="isRegister">
        <Lock class="icon" theme="multi-color" size="20" :fill="['#324EC7' ,'#324EC7' ,'#FFF' ,'#43CCF8']"/>
        <span class="line"></span>
        <el-input v-model="sure_password" type="password" placeholder="确认密码" @blur="inpublur('sure')"/>
      </div>
      <span class="input-err" v-if="passwordSureErr">
        '两次密码不一致'
      </span>
      <div class="input" v-if="isRegister">
        <Lock class="icon" theme="multi-color" size="20" :fill="['#324EC7' ,'#324EC7' ,'#FFF' ,'#43CCF8']"/>
        <span class="line"></span>
        <el-input v-model="code" placeholder="请输入注册码，联系管理员获取注册码"/>
      </div>
       <span  v-if="isRegister" class="to-login" @click="isRegister = false">去登录</span>
       <div  v-if="!isRegister"  class="remember"> <el-checkbox @change="rememberChange" v-model="remember" label="记住密码" /></div>
     </div>
     <div class="btn">
      <el-button :loading="isRegister && loading" class="btn-register" @click="registerClick">
        <span  v-if="!isRegister" >立即</span>
        注册</el-button>
      <el-button v-if="!isRegister" :loading="loading" class="btn-login" @click="loginClick">立即登陆</el-button>
     </div>
  </div>
  </div>
</template>

<script  setup lang="ts">
import { useLoginStore } from '@/store/login';
import {People, Lock} from '@icon-park/vue-next'
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'
 // import { ElCheckbox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { ref, onMounted } from 'vue'
import {Md5} from 'ts-md5'
const route = useRouter()
const loginStore = useLoginStore();
import {login, userRegister} from '@/service/login'
import { to } from 'await-to-js'
const { username, isRegister, userInfo, remember } = storeToRefs(loginStore)

const usename = ref<string>('')
const password = ref<string>('')
const loading = ref<boolean>(false)
const sure_password= ref<string>('')
const code = ref<string | number>('')
const passwordErr = ref<boolean>(false)
const passwordSureErr = ref<boolean>(false)

onMounted(() => {
  if(remember.value) {
    usename.value = userInfo.value?.username;
    password.value = userInfo.value.password
  }
})

const rememberChange = (e: boolean): void => {
 loginStore.setRemember(e);
} 

const inpublur = (type: string) => {
  if(type == 'default') {
    passwordErr.value = !!(!password.value || password.value.length < 6);
  }else {
    passwordSureErr.value = sure_password.value !== password.value;
  }
  
}
const loginClick = async (): Promise<void> => {
  if(isRegister.value) {
    loginStore.setIsRegister(isRegister.value)
    return;
  }
  if(password.value && usename.value) {
    loading.value = true;
    let passWord = `ai-${password.value }`
    const md5:any = new Md5();
    md5.appendAsciiStr(passWord);
    let [err, response] = await to(login({password: md5.end(), username: usename.value}));
    loading.value = false;
    if (err || (response && !response?.success)) {
      ElMessage.error('登录失败' + response?.message );
      // ElMessage.error('登录失败' + + (err ? err.message : !response?.message || '未知错误'));
      return;
    }
    loginStore.setUserInfo(remember.value ? {password: password.value, username: usename.value}: null)
    route.push('/home/main');
    ElMessage.success('登陆成功')
    return;
  }
  ElMessage.error('请输入用户名或密码')
}

// 注册
const registerClick = async(): Promise<void> => {
  
  if(!isRegister.value) {
    loginStore.setIsRegister(isRegister.value);
    usename.value = password.value = '';
    return;
  }

  if(!usename.value || !password.value){
    ElMessage.error('请输入用户名或密码')
    return;
  }
  // if(!)
  if(password.value !== sure_password.value) {
    ElMessage.error('两次输入密码不一致')
    return;
  }
  if(!code.value) {
    ElMessage.error('注册码不能为空')
    return;
  }
  loading.value = true;
  let passWord = `ai-${password.value }`
  const md5:any = new Md5();
  md5.appendAsciiStr(passWord);
  let [err, response] = await to(userRegister({password: md5.end(), username: usename.value, registerCode: code.value }));
  loading.value = false;
  if (err || (response && !response?.success)) {
    ElMessage.error('注册失败' + response?.message );
    return;
  }
  ElMessage.success('注册成功')
  loginStore.setIsRegister(isRegister.value)
}

</script>

<style scoped lang="css">
.input {
  background: #DCE8FF;
  display: flex;
  width: 100%;
  align-items: center;
  height: 40px;
  border-radius: 6px;
  margin-bottom: 20px;
}
:deep(.el-input__inner) {
  border: 0;
  background: #DCE8FF;
}
:deep(.el-input__wrapper) {
  padding: 0;
}
:deep(.el-input__inner::placeholder) {
  color: #5E77D6;
  font-size: 14px;
  font-weight: 600;
}
:deep(.el-checkbox__label){
  color: #7B8FDB;
}
/* :deep(.el-checkbox__input){
  border: 1px solid #7B8FDB;
} */
.icon {
  margin: 0 6px 0 10px;
}
.line {
  height: 20px;
  width: 2px;
  background-color: #5E77D6;
  margin-right: 4px;
  margin-bottom: 2px;
}
.remember {
  text-align: right;
  /* position: absolute;
  right: 0; */
}
.to-login {
  text-align: right;
  font-size: 14px;
  list-style: decimal;
  text-decoration: underline;
  color: #324EC7;
  cursor: pointer;
}
.login {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/imgs/bgc.png') no-repeat center;
  background-size: 100% 100%;
  position: relative;
}
.form {
  position: absolute;
  right: 200px;
  top: 240px;
  background-color: #fff;
  width: 370px;
  height: 500px;
  border-radius: 10px;
  box-shadow: 2px 2px 20px #AFC0F0;
}
.form-title {
  margin-top: 40px;
  text-align: center;
}
.form-tip {
  margin-top: 20px;
  text-align: center;
}
.input-err{
  margin-top: -20px;
  font-size: 12px;
  color: red;
  margin-bottom: 10px;
}
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* align-items: center;
  justify-content: center; */
  margin-top: 30px;
  padding: 0 40px;
  /* position: relative; */
  box-sizing: border-box;
}
.btn {
  padding: 0 40px;
  /* margin-top: 10px; */
}
.btn-register {
  width: 100%;
  height: 40px;
  border: 1px solid #7B8FDB;
  border-radius: 6px;
  background-color: #fff;
  color: #5E6FE9;
  margin: 20px 0;
}
:deep(.el-button+.el-button) {
  margin-left: 0;
}
.btn-login {
  width: 100%;
  height: 40px;
  /* border: 1px solid #7B8FDB; */
  border-radius: 6px;
  background-color: #4557E5;
  color: #fff;
  border: 0;
}
</style>